<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P143 动手实践：红绿灯倒计时</title>
    <style>
        .box{width: 300px;height: 60px;padding: 22px;
        border: 300px solid#ccc;border-radius: 200px;margin: 0 auto;
        }
        .box .count{width: 60px;color: #666;font-size: 280%;line-height: 50px;
        padding-left: 10px;margin-left: 5px;border: 1px solid#fff;}
        .box div{margin-left: 5px;float: left;width: 5px;height: 50px;
        border-radius: 10px;border: 5px solid#666;}
        .gray{background-color:#eee ;}
        .red{background-color: red;}
        .yellow{background-color: yellow;}
        .green{background-color: green;}
    </style>
</head>
<body>
    <div class="box">
        <div id="red"></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div id="count" class="count"></div>
    </div>
    <script>
        var lamp={
            red:{
                obj:document.getElementById('red'),
                timeout:30,
                style:['red','gray','gray'],
                next:'green'
            },
            yellow:{
                obj:document.getElementById('yellow'),
                timeout:5,
                style:['gray','yellow','gray'],
                next:'red'
            },
            green:{
                obj:document.getElementById('green'),
                timeout:35,
                style:['gray','gray','green'],
                next:'yellow'
            },
            changeStyle(style){
                this.red.obj.className=style[0];
                this.yellow.obj.className=style[1];
                this.green.obj.className=style[2];
            }
        }
        var count={
            obj:document.getElementById('count'),
            change:function(num){
                this.obj.innerHTML=(num<10)?('0'+num):num;
            }
        };
        var now=lamp.green;
        var timeout=now.timeout;
        lamp.changeStyle(now.style);
        count.change(timeout);
        setInterval(function(){
            if(--timeout<=0){
                now=lamp[now.next];
                timeout=now.timeout;
                lamp.changeStyle(now.style);
            }
            count.change(timeout);
        },1000);
    </script>
</body>
</html>